<template>
  <div ref="chartEl" style="height:100%;"></div>
</template>
<script>
import echarts from "echarts";
var ChartBlock = {
  name: "ChartBlock",
  data() {
    return {
      chart: null,
    };
  },
  methods: {
    setOption(option) {
      this.chart && this.chart.setOption(option);
      this.chart.__resize();
    },
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chartEl);
    //节流处理
    function throttle(func, wait, options) {
      let time, context, args;
      let previous = 0;
      if (!options) options = {};

      let later = function() {
        previous = options.leading === false ? 0 : new Date().getTime();
        time = null;
        func.apply(context, args);
        if (!time) context = args = null;
      };

      let throttled = function() {
        let now = new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        let remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
          if (time) {
            clearTimeout(time);
            time = null;
          }
          previous = now;
          func.apply(context, args);
          if (!time) context = args = null;
        } else if (!time && options.trailing !== false) {
          time = setTimeout(later, remaining);
        }
      };
      return throttled;
    }

    var chart = this.chart;
    this.chart.__resize = throttle(function() {
      chart.resize();
    }, 200);

    setTimeout(() => {
      window.addEventListener("resize", this.chart.__resize);
    }, 200);
    this.chart.on("click", (params) => {
      this.$emit("click", params, this.chart);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.chart.__resize);
  },
};

/* istanbul ignore next */
ChartBlock.install = function(Vue) {
  Vue.component(ChartBlock.name, ChartBlock);
};
export default ChartBlock;
</script>
